<script setup lang="ts">
import { ref, reactive, watch, computed } from "vue";
import { onLoad, onPageScroll } from "@dcloudio/uni-app";
import { getLawyerInfo, getLawyerReview } from "@/api/lawyer";

const info = reactive({
  id: 0,
  lawyerCover: '',
  lawyerFullname: '',
  lawfirmName: '',
  lawyerJoblevel: '',
  lawyerCity: '',
  lawyerCertificate: '',
  lawyerWork: '',
  lawyerSummary: '',
  lawyerSpeciality: '',
  lawyerIndustry: '',
  lawyerCitys: '',
  lawyerPhone: '',
  lawyerEmail: '',
  lawyerAddress: '',
});

const suMore = ref(false);

/** 工作经历 */
const lawyerWork = computed(()=>{
  return info.lawyerWork.split('\r\n');
});

/** 擅长领域 */
const lawyerSpeciality = computed(()=>{
  return info.lawyerSpeciality.split(',');
});

/** 行业领域 */
const lawyerIndustry = computed(()=>{
  return info.lawyerIndustry.split(',');
});

const reviewList = ref([]);

onLoad(async (options)=>{
  if(options?.id){
    const data = await getLawyerInfo(options.id);
    Object.assign(info, data);
    getLawyerReview({lawyerName : data.lawyerFullname}).then((res)=>{
      reviewList.value = res.list;
    });
  }
});

function formatImage(url) {
  if (url) {
    return `${import.meta.env.VITE_API_URL}${url}`
  }else {
    return 'https://static.minglvtang.com/images/placeholder/man.png'
  } 
}

// 吸顶变色
const isScrolled = ref(false);
onPageScroll((e)=>{
  isScrolled.value = e.scrollTop > 0;
});
</script>

<template>
  <view class="relative overflow-hidden">
    <page-navbar title="律师详情" :isScrolled="isScrolled"></page-navbar>

    <view class="mx-4 mt-5 min-h-50 bg-([url(https://static.minglvtang.com/images/bg_lawyer.png)] no-repeat size-full) grid grid-cols-2">
      <view class="p-3">
        <view class="flex items-center justify-between">
          <view class="text-(2xl white)">{{ info.lawyerFullname }}</view>
          <view class="text-(xs #B3D2FB) flex items-center" v-if="info.lawyerCity">
            <image class="size-4 align-middle" src="https://static.minglvtang.com/images/icons/marker.png" mode="aspectFill" />
            {{info.lawyerCity}}
          </view>
        </view>

        <view class="flex space-x-1 mt-1">
          <image class="size-4 align-middle" src="https://static.minglvtang.com/images/icons/lawfirm.png" mode="aspectFill" />
          <view class="text-(sm white)">{{info.lawfirmName}}</view>
        </view>

        <view class="text-(sm #B3D2FB) mt-4">职位</view>
        <view class="text-(sm white) mt-1">{{info.lawyerJoblevel}}</view>

        <view class="text-(sm #B3D2FB) mt-4">执业信息</view>
        <view class="text-(sm white) mt-1">{{info.lawyerCertificate}}</view>
      </view>
      <view class="relative size-full">
        <image class="size-full align-middle" :src="formatImage(info.lawyerCover)" mode="aspectFill" />
        <view class="absolute -bottom-1 left-1/2 -translate-x-50% flex items-center  whitespace-nowrap text-0" v-if="lawyerSpeciality.length > 0">
          <image class="h-6 align-middle" src="https://static.minglvtang.com/images/bg_badge_before.png" mode="heightFix" />
          <view class="pl-1 max-w-32 truncate text-(sm/6 #3E0966) bg-([url(https://static.minglvtang.com/images/bg_badge.png)] size-full no-repeat)">{{lawyerSpeciality[0]}}</view>
          <image class="h-6 align-middle" src="https://static.minglvtang.com/images/bg_badge_after.png" mode="heightFix" />
        </view>
      </view>
    </view>

    <view class="mx-4 p-3 pt-4 bg-#1373FF/6 rounded-b-lg -translate-y-1 text-(sm #253851) grid gap-1" v-if="info.lawyerWork">
      <view class="list-(item disc inside) text-justify" v-for="item in lawyerWork" :key="item">{{item}}</view>
    </view>

    <view class="mx-4 mt-5 p-3 bg-white rounded-lg grid gap-3" v-if="info.lawyerSummary">
      <view class="text-lg">个人简介</view>
      <view class="text-sm/7" :class="{'line-clamp-6': !suMore}">{{info.lawyerSummary}}</view>
      <view class="flex items-center justify-center text-#1373FF" @click="suMore = !suMore">
        <view class="text-sm">{{suMore ? '收起' : '查看更多'}}</view>
        <view :class="[suMore ? 'i-ri-arrow-up-s-line' : 'i-ri-arrow-down-s-line']"></view>
      </view>
    </view>

    <view class="mx-4 mt-5 p-3 bg-white rounded-lg grid gap-3" v-if="lawyerSpeciality.length > 0 && lawyerIndustry.length > 0">
      <view class="text-lg">擅长领域</view>
      <view class="text-sm">业务领域：</view>
      <view class="flex flex-wrap text-sm">
        <!-- <view class="mr-1 mb-1 bg-#E6F4FF text-#1373FF px-2 py-1 rounded border-(~ solid #0164E6)">反垄断申报</view> -->
        <view class="mr-1 mb-1 bg-#E6F4FF text-#1373FF px-2 py-1 rounded" v-for="item in lawyerSpeciality" :key="item">{{item}}</view>
      </view>
      <view class="text-sm">行业领域：</view>
      <view class="flex flex-wrap text-sm" v-if="info.lawyerIndustry">
        <view class="mr-1 mb-1 bg-#E6F4FF text-#1373FF px-2 py-1 rounded" v-for="item in lawyerIndustry" :key="item">{{item}}</view>
      </view>
    </view>

    <!-- 
    <view class="mx-4 mt-5 p-3 bg-white rounded-lg grid gap-3">
      <view class="text-lg">收费标准</view>
      <view class="text-sm/7 line-clamp-6">限企业标准会员可见</view>
    </view>
    -->
    <view class="mx-4 my-5 p-3 bg-white rounded-lg grid gap-3">
      <view class="text-lg">联系方式</view>
      <view class="flex items-center justify-between text-sm pb-3 border-b-(~ solid #F4F6F7)" v-if="info.lawyerPhone">
        <image class="size-5 align-middle" src="https://static.minglvtang.com/images/icons/tel.png" mode="widthFix" />
        <view class="flex-1 ml-1">电话</view>
        <view class="blur-sm">{{info.lawyerPhone}}</view>
      </view>
      <view class="flex items-center justify-between text-sm pb-3 border-b-(~ solid #F4F6F7)" v-if="info.lawyerEmail">
        <image class="size-5 align-middle" src="https://static.minglvtang.com/images/icons/email.png" mode="widthFix" />
        <view class="flex-1 ml-1">邮箱</view>
        <view class="blur-sm">{{info.lawyerEmail}}</view>
      </view>
      <view class="flex flex-wrap items-center justify-between text-sm" v-if="info.lawyerAddress">
        <image class="size-5 align-middle" src="https://static.minglvtang.com/images/icons/house.png" mode="widthFix" />
        <view class="flex-1 ml-1">地址</view>
        <view class="blur-sm">{{info.lawyerAddress}}</view>
      </view>
      <view class="flex items-center justify-center">
        <image class="size-4 align-middle" src="https://static.minglvtang.com/images/icons/crown.png" mode="widthFix" />
        <view class="text-(sm #FF920D) ml-1">商业标准会员可见</view>
      </view>
    </view>

    <!-- 评价 -->
    <view class="mx-4 my-5 p-3 bg-white rounded-lg grid gap-3">
      <view class="text-lg">客户评价</view>
      
      <view class="bg-#FCF9EF rounded-md p-2 flex items-center justify-between">
        <view class="text-center">
          <view class="text-(2xl #FF920D) font-bold">5.0</view>
          <view class="text-(sm #9E6A14)">总平均分</view>
        </view>
        <view class="flex flex-1 justify-end space-x-5">
          <view class="text-center">
            <view class="text-(lg #333333)">5.0</view>
            <view class="text-(xs #666666)">专业水平</view>
          </view>
          <view class="text-center">
            <view class="text-(lg #333333)">5.0</view>
            <view class="text-(xs #666666)">行业经验</view>
          </view>
          <view class="text-center">
            <view class="text-(lg #333333)">5.0</view>
            <view class="text-(xs #666666)">工作成果</view>
          </view>
        </view>
      </view>
    </view>

    <swiper class="min-h-70 mb-5" circular previous-margin="32rpx" next-margin="32rpx" v-if="reviewList.length > 0">
      <swiper-item v-for="(item, index) in reviewList" :key="index">
        <view class="bg-white p-2 rounded-md mx-1">
          <view class="flex items-center">
            <view class="text-(sm #333333)">{{item.randomName}}</view>
            <image class="h-6 align-middle ml-2" src="https://static.minglvtang.com/images/icons/certified.png" mode="heightFix" />
            <view class="flex-1 flex justify-end">
              <view class="text-(sm #FF920D)">{{item.sumScore}}</view>
              <uni-rate readonly allow-half :size="18" color="#eeeff1" active-color="#FBAD38" :value="5" />
            </view>
          </view>
          <view class="text-(xs #1373FF) mt-1 flex flex-wrap gap-1 [&>view]:(p-1 bg-#E6F4FF rounded-sm)">
            <view>{{item.recommendIndustryFr}}</view>
            <view>{{item.recommendGradeFr}}</view>
            <view>{{item.recommendTypeFr}}</view>
            <view>{{item.recommendJoblevelFr}}</view>
          </view>
          <view class="text-(sm #333333) line-clamp-3 my-3">{{ item.recommendCon }}</view>
          <view class="grid grid-cols-5 gap-4 mt-3 py-2 border-t-(~ solid #F4F6F7)">
            <view class="text-center min-w-12">
              <view class="text-(lg #333333)">{{item.scoreStartone1}}</view>
              <view class="text-(xs #666666)">专业水平</view>
            </view>
            <view class="text-center min-w-12">
              <view class="text-(lg #333333)">{{item.scoreStartone2}}</view>
              <view class="text-(xs #666666)">行业经验</view>
            </view>
            <view class="text-center min-w-12">
              <view class="text-(lg #333333)">{{item.scoreStartone3}}</view>
              <view class="text-(xs #666666)">沟通能力</view>
            </view>
            <view class="text-center min-w-12">
              <view class="text-(lg #333333)">{{item.scoreStartone4}}</view>
              <view class="text-(xs #666666)">文书水平</view>
            </view>
            <view class="text-center min-w-12">
              <view class="text-(lg #333333)">{{item.scoreStartone5}}</view>
              <view class="text-(xs #666666)">响应速度</view>
            </view>
            <view class="text-center min-w-12">
              <view class="text-(lg #333333)">{{item.scoreStartone6}}</view>
              <view class="text-(xs #666666)">资源统筹</view>
            </view>
            <view class="text-center min-w-12">
              <view class="text-(lg #333333)">{{item.scoreStartone7}}</view>
              <view class="text-(xs #666666)">工作效率</view>
            </view>
            <view class="text-center min-w-12">
              <view class="text-(lg #333333)">{{item.scoreStartone8}}</view>
              <view class="text-(xs #666666)">服务意识</view>
            </view>
            <view class="text-center min-w-12">
              <view class="text-(lg #333333)">{{item.scoreStartone9}}</view>
              <view class="text-(xs #666666)">商务经验</view>
            </view>
            <view class="text-center min-w-12">
              <view class="text-(lg #333333)">{{item.scoreStartone10}}</view>
              <view class="text-(xs #666666)">工作成果</view>
            </view>
          </view>
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>
